<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../Template/AdminTemplate.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="content">
        <div class="content-box"><!-- Start Content Box -->

            <div class="content-box-header">

                <h3>PROJECT MANAGER</h3>
                <div class="clear"></div>

            </div> <!-- End .content-box-header -->

            <div class="content-box-content">

                <div class="tab-content default-tab" id="tab1"> <!-- This is the target div. id must match the href of this div's tab -->

                    <div class="notification attention png_bg">
                        <a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
                        <div>
								This is a Content Box. You can put whatever you want in it. By the way, you can close this notification with the top-right cross.
                        </div>
                    </div>

                    <table>

                        <thead>
                            <tr>
                                <th><input class="check-all" type="checkbox" /></th>
                                <th>Project ID</th>
                                <th>Project Name</th>
                                <th>Category Name</th>
                                <th>Short Description</th>
                                <th>Image</th>
                                <th>Option</th>
                            </tr>

                        </thead>

                        <tfoot>
                            <tr>
                                <td colspan="6">
                                    <div class="bulk-actions align-left">
                                        <select name="dropdown">
                                            <option value="option1">Choose an action...</option>
                                            <option value="option2">Edit</option>
                                            <option value="option3">Delete</option>
                                        </select>
                                        <a class="button" href="#">Apply to selected</a>
                                    </div>

                                    <div class="pagination">
                                        <a href="#" title="First Page">&laquo; First</a><a href="#" title="Previous Page">&laquo; Previous</a>
                                        <a href="#" class="number" title="1">1</a>
                                        <a href="#" class="number" title="2">2</a>
                                        <a href="#" class="number current" title="3">3</a>
                                        <a href="#" class="number" title="4">4</a>
                                        <a href="#" title="Next Page">Next &raquo;</a><a href="#" title="Last Page">Last &raquo;</a>
                                    </div> <!-- End .pagination -->
                                    <div class="clear"></div>
                                </td>
                            </tr>
                        </tfoot>

                        <!--<c:forEach items="#{projectBean.showProject()}" var="pj">-->
                        <ui:repeat value="#{projectBean.showProject()}" var="pdro">
                            <tbody>
                                <tr>
                                    <td><input type="checkbox" /></td>
                                    <td>#{pdro.id}</td>
                                    <td><a href="#" title="title">#{pdro.name}</a></td>
                                    <td>#{pdro.category}</td>
                                    <td>#{pdro.shortDes}</td>
                                    <td>#{pdro.image}</td>
                                    <td>
                                        <!-- Icons -->
                                        <a href="#" title="Edit"><img src="resources/images/icons/pencil.png" alt="Edit" /></a>
                                        <a href="#" onclick="return confirm('Are you sure you want to delete?')" title="Delete"><img src="Resources/images/icons/cross.png" alt="Delete" /></a> 
                                        <a href="#" title="Edit Meta"><img src="resources/images/icons/hammer_screwdriver.png" alt="Edit Meta" /></a>
                                    </td>
                                </tr>
                            </tbody>
                        </ui:repeat>
                        <!--</c:forEach>-->

                    </table>

                </div> <!-- End #tab1 -->
                <!-- End #tab2 -->
            </div>
            <!-- End .content-box-content -->

        </div>
    </ui:define>
</ui:composition>
